<template>
    <header>
        <h1>
            <img src="@/assets/images/logo.png" alt="">
        </h1>
        <div class="search" @click="goSearch">
            <i class="iconfont icon-fangdajing"></i>
            <span>搜你喜欢的商品</span>
        </div>
        <div class="kefu">
            <i class="iconfont icon-kefu"></i>
        </div>
    </header>
</template>

<script>
    export default {
        methods: {
            goSearch(){
                this.$router.push('/search')
            }
        }
    }
</script>

<style lang="css" scoped>
header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.2571rem;
    background-color: #b0352f;
    overflow: hidden;
}
header h1 {
    width: 2.4286rem;
    padding: 5px;
}
header h1 img {
    width: 100%;
    height: 100%;
}
.search {
    display: flex;
    align-items: center;
    height: .7143rem;
    flex: 1;
    border-radius: 15px;
    background-color: #fff;
    margin: 0 3px;
}
.search i {
    padding: 0 .1714rem;
    color: #ccc;
}
.search span {
    font-size: .4rem;
    color: #ccc;
}
.kefu {
    width: 1.1429rem;
    text-align: center;
}
.kefu i {
    font-size: .8571rem;
    color: #fff;
}
</style>